<template>
  <div class="tabs">
    <div
      v-for="(item, index) in tabs"
      :key="item.type"
      @click="handleChange(index, item.type)"
      :class="['tab-item', index === currentIndex ? 'active' : '']"
    >
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: Array
  },
  data: () => ({
    // tabs: ['a', 'b', 'c']
    currentIndex: 0
  }),
  methods: {
    handleChange(index, type) {
      this.currentIndex = index
      /* $emit传参 */
      this.$emit('change', type)
    }
  }
}
</script>

<style lang="less" scoped>
.tabs {
  background: #ffffff;
  display: flex;
  line-height: 44px;
  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .active span {
    padding: 3px 0;
    border-bottom: 3px solid var(--theme-color);
    color: var(--theme-color);
  }
}
</style>
